<template>
  <div class="chat-container">
    <div class="chat-header">
      <button @click="goBack" class="back-button">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M19 12H5M12 19l-7-7 7-7"></path>
        </svg>
      </button>
      <div class="chat-title-area">
        <div class="character-info-mini">
          <img v-if="characterStore.character" :src="characterStore.character.avatar" :alt="characterStore.character.name" class="character-avatar-mini" />
          <div class="character-name-mini">
            <h2>{{ characterName }}</h2>
            <span class="online-status">在线</span>
          </div>
        </div>
        <div class="chat-actions">
          <button @click="showChatOptions" class="options-button">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="1"></circle>
              <circle cx="19" cy="12" r="1"></circle>
              <circle cx="5" cy="12" r="1"></circle>
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 聊天选项下拉菜单 -->
    <div v-if="showOptionsDropdown" class="options-dropdown">
      <button @click="renameChat" class="dropdown-item">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
        </svg>
        重命名对话
      </button>
      <button @click="clearMessages" class="dropdown-item">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="3 6 5 6 21 6"></polyline>
          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
          <line x1="10" y1="11" x2="10" y2="17"></line>
          <line x1="14" y1="11" x2="14" y2="17"></line>
        </svg>
        清空消息
      </button>
      <button @click="deleteChat" class="dropdown-item delete">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="3 6 5 6 21 6"></polyline>
          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
        </svg>
        删除对话
      </button>
    </div>

    <!-- 聊天内容区域 -->
    <div class="chat-messages" ref="chatMessagesRef" @scroll="handleScroll">
      <!-- 加载更多提示 -->
      <div v-if="hasMoreMessages && !chatStore.loading" class="load-more">
        <button @click="loadMoreMessages" class="load-more-btn">加载更多消息</button>
      </div>
      
      <!-- 加载中状态 -->
      <div v-if="chatStore.loading && chatMessages.length === 0" class="loading">
        <div class="loading-spinner"></div>
        <p>正在连接对话...</p>
      </div>

      <!-- 初始提示信息 -->
      <div v-if="chatMessages.length === 0 && !chatStore.loading" class="welcome-message">
        <div class="welcome-content">
          <img v-if="characterStore.character" :src="characterStore.character.avatar" :alt="characterStore.character.name" class="welcome-avatar" />
          <div class="welcome-text">
            <h3>开始与{{ characterName }}的对话</h3>
            <p>{{ characterStore.character?.description || '这是一个AI助手，随时准备回答你的问题。' }}</p>
            <div class="welcome-tips">
              <button v-for="tip in conversationTips" :key="tip" @click="sendTipMessage(tip)" class="tip-button">
                {{ tip }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 消息列表 -->
      <div v-for="message in chatMessages" :key="message.id" class="message-wrapper">
        <div v-if="message.sender === 'user'" class="message user-message">
          <div class="message-content">
            <p>{{ message.content }}</p>
          </div>
          <div class="message-time">{{ formatMessageTime(message.timestamp) }}</div>
        </div>
        <div v-else class="message ai-message">
          <img v-if="characterStore.character" :src="characterStore.character.avatar" :alt="characterStore.character.name" class="message-avatar" />
          <div class="message-bubble">
            <div class="message-sender">{{ characterName }}</div>
            <div class="message-content">
              <p>{{ message.content }}</p>
            </div>
            <div class="message-time">{{ formatMessageTime(message.timestamp) }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息输入区域 -->
    <div class="chat-input-area">
      <div class="input-container">
        <textarea
          v-model="messageInput"
          placeholder="输入消息..."
          @keydown.ctrl.enter="sendMessage"
          @keydown.enter.prevent="sendMessage"
          :disabled="sendingMessage || !authStore.isAuthenticated"
          class="message-input"
          ref="messageInputRef"
          rows="1"
        ></textarea>
        <div class="input-actions">
          <button @click="expandInput" class="expand-button">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M8 16h.01M8 8h.01M16 16h.01M16 8h.01M12 16h.01M12 12h.01M12 8h.01M21 12c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9 9 4.03 9 9z"></path>
            </svg>
          </button>
          <button
            @click="sendMessage"
            :disabled="!messageInput.trim() || sendingMessage || !authStore.isAuthenticated"
            class="send-button"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="22" y1="2" x2="11" y2="13"></line>
              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
            </svg>
          </button>
        </div>
      </div>
      <div v-if="!authStore.isAuthenticated" class="login-prompt">
        <p>请先<a href="#" @click.prevent="goToLogin">登录</a>才能发送消息</p>
      </div>
      <div v-if="authStore.isAuthenticated" class="input-hint">
        <p>按 Enter 发送，Ctrl + Enter 换行</p>
      </div>
    </div>

    <!-- 重命名对话框 -->
    <div v-if="showRenameDialog" class="dialog-overlay">
      <div class="dialog">
        <h3>重命名对话</h3>
        <input
          v-model="newChatTitle"
          type="text"
          placeholder="输入新的对话标题"
          @keyup.enter="confirmRenameChat"
          @keyup.esc="cancelRenameChat"
          ref="renameInputRef"
          class="rename-input"
        />
        <div class="dialog-buttons">
          <button @click="cancelRenameChat" class="cancel-button">取消</button>
          <button @click="confirmRenameChat" class="confirm-button" :disabled="!newChatTitle.trim()">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { characterStore } from '../store/character';
import { chatStore } from '../store/chat';
import { authStore } from '../store/auth';

const router = useRouter();
const route = useRoute();
const characterStoreRef = characterStore();
const chatStoreRef = chatStore();
const authStoreRef = authStore();

// DOM引用
const chatMessagesRef = ref(null);
const messageInputRef = ref(null);
const renameInputRef = ref(null);

// 响应式数据
const messageInput = ref('');
const sendingMessage = ref(false);
const showOptionsDropdown = ref(false);
const showRenameDialog = ref(false);
const newChatTitle = ref('');
const hasMoreMessages = ref(true);
const currentPage = ref(1);
const pageSize = 50;

// 对话提示建议
const conversationTips = ref([
  '你好，能介绍一下你自己吗？',
  '你能帮我解决一个问题吗？',
  '今天天气怎么样？',
  '你有什么兴趣爱好？'
]);

// 计算属性
const characterName = computed(() => {
  if (characterStoreRef.character) {
    return characterStoreRef.character.name;
  }
  return 'AI助手';
});

const chatMessages = computed(() => {
  return chatStoreRef.currentChat?.messages || [];
});

// 格式化消息时间
const formatMessageTime = (timestamp) => {
  const date = new Date(timestamp);
  const now = new Date();
  const diffInHours = (now - date) / (1000 * 60 * 60);
  
  if (diffInHours < 1) {
    const minutes = Math.floor((now - date) / (1000 * 60));
    return `${minutes}分钟前`;
  } else if (diffInHours < 24) {
    return new Intl.DateTimeFormat('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    }).format(date);
  } else {
    return new Intl.DateTimeFormat('zh-CN', {
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    }).format(date);
  }
};

// 自动调整输入框高度
const adjustTextareaHeight = () => {
  if (messageInputRef.value) {
    messageInputRef.value.style.height = 'auto';
    messageInputRef.value.style.height = Math.min(messageInputRef.value.scrollHeight, 200) + 'px';
  }
};

// 展开输入框
const expandInput = () => {
  if (messageInputRef.value) {
    const currentHeight = parseInt(messageInputRef.value.style.height || 'auto');
    if (currentHeight < 200) {
      messageInputRef.value.style.height = '200px';
    } else {
      messageInputRef.value.style.height = 'auto';
    }
  }
};

// 发送消息
const sendMessage = async () => {
  const content = messageInput.value.trim();
  if (!content || sendingMessage.value || !authStoreRef.isAuthenticated) {
    return;
  }

  sendingMessage.value = true;
  
  try {
    // 添加用户消息
    const userMessage = {
      id: Date.now(),
      content,
      sender: 'user',
      timestamp: new Date().toISOString()
    };
    
    await chatStoreRef.addMessage(route.params.characterId, userMessage);
    
    // 清空输入框
    messageInput.value = '';
    adjustTextareaHeight();
    
    // 滚动到底部
    await nextTick();
    scrollToBottom();
    
    // 模拟AI回复（实际应该调用API）
    // 这里使用setTimeout模拟网络延迟和思考过程
    setTimeout(async () => {
      const aiMessage = {
        id: Date.now() + 1,
        content: `这是对"${content}"的回复。在实际应用中，这里会显示AI生成的响应。`,
        sender: 'ai',
        timestamp: new Date().toISOString()
      };
      
      await chatStoreRef.addMessage(route.params.characterId, aiMessage);
      
      // 再次滚动到底部
      await nextTick();
      scrollToBottom();
    }, 1000);
  } catch (error) {
    console.error('发送消息失败:', error);
    alert('发送消息失败，请重试。');
  } finally {
    sendingMessage.value = false;
  }
};

// 发送提示消息
const sendTipMessage = (tip) => {
  messageInput.value = tip;
  sendMessage();
};

// 滚动到底部
const scrollToBottom = () => {
  if (chatMessagesRef.value) {
    chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight;
  }
};

// 加载更多消息
const loadMoreMessages = async () => {
  if (chatStoreRef.loading) return;
  
  try {
    currentPage.value++;
    await chatStoreRef.loadChatHistory(route.params.characterId, currentPage.value, pageSize);
    // 加载更多消息后，保持当前滚动位置
  } catch (error) {
    console.error('加载更多消息失败:', error);
    currentPage.value--;
  }
};

// 处理滚动事件
const handleScroll = () => {
  if (!chatMessagesRef.value) return;
  
  const { scrollTop } = chatMessagesRef.value;
  // 当滚动到顶部时，加载更多消息（如果还有）
  if (scrollTop < 100 && hasMoreMessages.value && !chatStoreRef.loading) {
    loadMoreMessages();
  }
};

// 显示聊天选项
const showChatOptions = () => {
  showOptionsDropdown.value = !showOptionsDropdown.value;
};

// 重命名对话
const renameChat = () => {
  showOptionsDropdown.value = false;
  showRenameDialog.value = true;
  newChatTitle.value = chatStoreRef.currentChat?.title || characterName.value;
  
  nextTick(() => {
    if (renameInputRef.value) {
      renameInputRef.value.focus();
      renameInputRef.value.select();
    }
  });
};

// 确认重命名对话
const confirmRenameChat = async () => {
  const title = newChatTitle.value.trim();
  if (!title) return;
  
  try {
    await chatStoreRef.updateChatTitle(route.params.characterId, title);
    showRenameDialog.value = false;
  } catch (error) {
    console.error('重命名对话失败:', error);
    alert('重命名对话失败，请重试。');
  }
};

// 取消重命名对话
const cancelRenameChat = () => {
  showRenameDialog.value = false;
};

// 清空消息
const clearMessages = async () => {
  if (confirm('确定要清空所有消息吗？此操作不可撤销。')) {
    try {
      await chatStoreRef.clearChatMessages(route.params.characterId);
    } catch (error) {
      console.error('清空消息失败:', error);
      alert('清空消息失败，请重试。');
    }
  }
};

// 删除对话
const deleteChat = async () => {
  if (confirm('确定要删除这个对话吗？所有消息将会丢失，此操作不可撤销。')) {
    try {
      await chatStoreRef.deleteChat(route.params.characterId);
      router.push({ name: 'character-detail', params: { id: route.params.characterId } });
    } catch (error) {
      console.error('删除对话失败:', error);
      alert('删除对话失败，请重试。');
    }
  }
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 跳转到登录页
const goToLogin = () => {
  router.push({ name: 'login' });
};

// 初始化页面
const initializePage = async () => {
  // 加载用户认证状态
  authStoreRef.loadFromStorage();
  
  const characterId = route.params.characterId;
  
  try {
    // 加载角色信息
    if (!characterStoreRef.character) {
      await characterStoreRef.getCharacterById(characterId);
    }
    
    // 加载聊天历史
    await chatStoreRef.loadChat(characterId);
    
    // 滚动到底部
    await nextTick();
    scrollToBottom();
    
    // 检查是否有初始消息需要发送
    if (route.query.initialMessage) {
      messageInput.value = route.query.initialMessage;
      sendMessage();
      // 清除查询参数，避免刷新页面后再次发送
      router.replace({ query: {} });
    }
  } catch (error) {
    console.error('初始化聊天页面失败:', error);
  }
};

// 监听消息输入变化，自动调整高度
watch(messageInput, () => {
  adjustTextareaHeight();
});

// 组件挂载时
onMounted(() => {
  initializePage();
  
  // 点击外部关闭选项下拉菜单
  document.addEventListener('click', (event) => {
    const chatActions = document.querySelector('.chat-actions');
    if (showOptionsDropdown.value && chatActions && !chatActions.contains(event.target)) {
      showOptionsDropdown.value = false;
    }
  });
  
  // 监听ESC键关闭重命名对话框
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && showRenameDialog.value) {
      cancelRenameChat();
    }
  });
});
</script>

<style scoped>
/* 全局样式 */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f9fa;
}

/* 聊天头部 */
.chat-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
  color: #666;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #f0f0f0;
  color: #333;
}

.chat-title-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 15px;
}

.character-info-mini {
  display: flex;
  align-items: center;
  gap: 12px;
}

.character-avatar-mini {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.character-name-mini h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #333;
}

.online-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: #48bb78;
}

.online-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #48bb78;
}

.options-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
  color: #666;
  transition: all 0.3s ease;
}

.options-button:hover {
  background-color: #f0f0f0;
  color: #333;
}

/* 聊天选项下拉菜单 */
.options-dropdown {
  position: absolute;
  top: 65px;
  right: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 100;
  min-width: 200px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 0.95rem;
  color: #333;
  transition: all 0.3s ease;
  text-align: left;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
  color: #667eea;
}

.dropdown-item.delete {
  color: #e53e3e;
}

.dropdown-item.delete:hover {
  background-color: #fed7d7;
  color: #c53030;
}

/* 聊天内容区域 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 10px 0;
}

.load-more-btn {
  padding: 8px 20px;
  border: 1px solid #e0e0e0;
  background-color: white;
  color: #667eea;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.load-more-btn:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

/* 加载中状态 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #666;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 欢迎消息 */
.welcome-message {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  height: 100%;
}

.welcome-content {
  max-width: 600px;
  text-align: center;
  background-color: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.welcome-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.welcome-text h3 {
  margin: 0 0 10px 0;
  font-size: 1.5rem;
  color: #333;
}

.welcome-text p {
  margin: 0 0 20px 0;
  color: #666;
  line-height: 1.6;
}

.welcome-tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.tip-button {
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  background-color: white;
  color: #666;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.tip-button:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

/* 消息样式 */
.message-wrapper {
  display: flex;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message {
  max-width: 70%;
  word-wrap: break-word;
}

.user-message {
  margin-left: auto;
  align-items: flex-end;
}

.ai-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.message-bubble {
  background-color: white;
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  max-width: calc(100% - 48px);
}

.user-message .message-content {
  background-color: #667eea;
  color: white;
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
}

.ai-message .message-content {
  color: #333;
}

.message-content p {
  margin: 0;
  line-height: 1.5;
}

.message-sender {
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
}

.message-time {
  font-size: 0.75rem;
  color: #999;
  margin-top: 4px;
  text-align: right;
}

.ai-message .message-time {
  text-align: left;
}

/* 消息输入区域 */
.chat-input-area {
  background-color: white;
  border-top: 1px solid #e0e0e0;
  padding: 20px;
}

.input-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.message-input {
  width: 100%;
  min-height: 40px;
  max-height: 200px;
  padding: 12px 16px;
  padding-right: 80px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  transition: all 0.3s ease;
  outline: none;
  font-family: inherit;
}

.message-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.message-input:disabled {
  background-color: #f8f9fa;
  cursor: not-allowed;
}

.input-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.expand-button,
.send-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
  color: #666;
  transition: all 0.3s ease;
}

.expand-button:hover {
  background-color: #f0f0f0;
  color: #333;
}

.send-button {
  background-color: #667eea;
  color: white;
}

.send-button:hover:not(:disabled) {
  background-color: #5a67d8;
}

.send-button:disabled {
  background-color: #cbd5e0;
  cursor: not-allowed;
}

.login-prompt,
.input-hint {
  text-align: center;
  margin-top: 10px;
  font-size: 0.85rem;
  color: #999;
}

.login-prompt a {
  color: #667eea;
  text-decoration: none;
}

.login-prompt a:hover {
  text-decoration: underline;
}

/* 重命名对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.dialog h3 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  color: #333;
}

.rename-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-size: 1rem;
  margin-bottom: 20px;
  outline: none;
  transition: all 0.3s ease;
}

.rename-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dialog-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cancel-button,
.confirm-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-button {
  background-color: #f8f9fa;
  color: #666;
  border: 1px solid #e0e0e0;
}

.cancel-button:hover {
  background-color: #e9ecef;
}

.confirm-button {
  background-color: #667eea;
  color: white;
}

.confirm-button:hover:not(:disabled) {
  background-color: #5a67d8;
}

.confirm-button:disabled {
  background-color: #cbd5e0;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-header {
    padding: 10px 15px;
  }
  
  .chat-title-area {
    margin-left: 10px;
  }
  
  .character-name-mini h2 {
    font-size: 1.1rem;
  }
  
  .chat-messages {
    padding: 15px;
    gap: 15px;
  }
  
  .message {
    max-width: 85%;
  }
  
  .welcome-content {
    padding: 30px 20px;
    margin: 0 10px;
  }
  
  .welcome-tips {
    grid-template-columns: 1fr;
  }
  
  .chat-input-area {
    padding: 15px;
  }
  
  .input-container {
    margin: 0;
  }
  
  .options-dropdown {
    right: 15px;
    top: 60px;
  }
}
</style>